<template>
  <div class="box">
    <el-col align="end">
      <el-button type="warning" round plain class="addBtn" @click="downloadTemplate">下载库区模板</el-button>
      <el-button type="warning" round plain class="addBtn" @click="importClick">导入库区信息</el-button>
    </el-col>

    <template>
      <el-dialog :visible="isShowDialog" title="导入库位" width="400px" @close="onClose">
        <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
        <div class="drop" @drop="handleDrop" @dragover="handleDragover">
          <i class="el-icon-upload" />
          <span>将文件拖到此处</span>
        </div>
        <el-row class="row">
          <el-col align="center">
            <el-button type="warning" round plain @click="onClose">取消</el-button>
            <el-button type="warning" round>添加</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </template>
  </div>
</template>

<script>
// 导入xlsx插件
// import * as XLSX from 'xlsx'
// 引入导出函数
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 导入枚举数据
import Enumerate from '@/constant/areaStatus'
export default {
  props: {
  },
  data() {
    return {
      Enumerate,
      isShowDialog: false
    }
  },
  created() {

  },
  methods: {
    // 下载库区模板
    downloadTemplate() {
      export_json_to_excel({
        header: ['所属仓库名称', '库区名称', '温度类型', '承重类型', '库区类型', '用途属性', '库区状态', '负责人', '联系电话'],
        data: [],
        filename: '库区信息导入模板', // 非必填 导出文件名
        autoWidth: true, // 非必填，单元格是否要自适应宽度
        bookType: 'xlsx' // 非必填，导出文件类型
      })
    },
    importClick() {
      this.isShowDialog = true
    },
    onClose() {
      this.isShowDialog = false
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')
        return
      }
      const rawFile = files[0] // only use files[0]

      if (!this.isExcel(rawFile)) {
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      }
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 500px;
  height: 50px;
  .row{
   padding-top: 20px;
  }
  .upload-demo,em,i{
    color: #efb43c;
    i{
      font-size: 60px;
    }
  }
}
</style>
